<template>
  <div class="add-icon">
    <div class="icon-list"></div>
    <van-popover
      placement="bottom-end"
      v-model="showPopover"
      theme="dark"
      trigger="click"
      :actions="actions"
      class="add-icon-bgi"
      :offset="[14, 12]"
      @select="clickFunc"
    >
    </van-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        {
          text: "发起群聊",
          icon: require("@/assets/image/addressImg/icon11.png"),
        },
        {
          text: "添加朋友",
          icon: require("@/assets/image/addressImg/icon12.png"),
        },
        {
          text: "扫一扫",
          icon: require("@/assets/image/addressImg/icon13.png"),
        },
        {
          text: "收付款",
          icon: require("@/assets/image/addressImg/icon14.png"),
        },
      ],
    };
  },
  methods: {
    clickFunc(e) {
      if (e.text === "添加朋友") {
        this.$router.push({
          name: "addFriends",
        });
      }
      if (e.text === "扫一扫") {
        this.$router.push("/scan");
      }
      if (e.text === "发起群聊") {
        this.$router.push("/buildgroupchatpage");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.add-icon {
  .add-icon-bgi {
    display: block;
    width: 30px;
    height: 30px;
    background-size: 30px;
    background-image: url("../assets/image/discover-img/add.png");
  }
}

.van-popover--dark .van-popover__content {
    background-color: #404040 !important;
}
</style>